import React, { useEffect, useMemo, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { Button, Cell, NavBar, Tabs } from "react-vant";
import { Arrow } from "@react-vant/icons";
import axios from "axios";
import VList from "rc-virtual-list";

const List = () => {
  // 获取查询参数
  const [searchParams] = useSearchParams();
  const start = searchParams.get("start");
  const end = searchParams.get("end");
  const date = searchParams.get("date");
  const [list, setList] = useState([]);
  const navigate = useNavigate();
  const currentDate = new Date();
  const dateList = new Array(21).fill().map((v, i) => {
    return new Date(
      currentDate.getTime() + 24 * 60 * 60 * 1000 * i
    ).toLocaleDateString();
  });

  const getList = async () => {
    const resp = await axios.get("/api/trip/airplane", {
      params: { start, end },
    });
    setList(resp.data.data.body.fl);
  };

  const toDetail = (v) => {
    navigate(`/detail/${v.atp}`, { state: v });
  };

  useEffect(() => {
    getList();
  }, []);

  return (
    <div>
      <NavBar
        title={
          <div>
            <span>{start}</span>
            <Arrow />
            <span>{end}</span>
          </div>
        }
      ></NavBar>

      <Tabs>
        {dateList.map((v, i) => {
          return <Tabs.TabPane title={v} key={i}></Tabs.TabPane>;
        })}
      </Tabs>
      <VList data={list} height={600} itemHeight={150} itemKey="index">
        {(v, i) => (
          <div>
            <Cell
              key={i}
              title={
                <div>
                  {v.dasn}
                  {v.dat} 到 {v.aasn}
                  {v.aat} {v.dst}-{v.ast}
                </div>
              }
              label={
                <div>
                  {v.asn}|{v.amn}|{v.amt}
                </div>
              }
              value={
                <div>
                  <div style={{ color: "red" }}>¥:{v.atp}</div>
                  <div>
                    <Button
                      size="small"
                      type="primary"
                      onClick={() => toDetail(v)}
                    >
                      预定
                    </Button>
                  </div>
                </div>
              }
            ></Cell>
          </div>
        )}
      </VList>
      {/* <Cell.Group>
        {list.map((v, i) => {
          return (
            <Cell
              key={i}
              title={
                <div>
                  {v.dasn}
                  {v.dat} 到 {v.aasn}
                  {v.aat} {v.dst}-{v.ast}
                </div>
              }
              label={
                <div>
                  {v.asn}|{v.amn}|{v.amt}
                </div>
              }
              value={
                <div>
                  <div style={{ color: "red" }}>¥:{v.atp}</div>
                  <div>
                    <Button
                      size="small"
                      type="primary"
                      onClick={() => toDetail(v)}
                    >
                      预定
                    </Button>
                  </div>
                </div>
              }
            ></Cell>
          );
        })}
      </Cell.Group> */}
    </div>
  );
};

export default List;
